<template>
  <div class="node-simple" :class="{ active: data.effectFlag === 1 }">
    <template v-if="data.targetType.length === 1">
      <Handle
        type="target"
        :position="Position.Left"
        :id="data.targetType[0]"
      />
    </template>
    <template v-if="data.targetType.length === 2">
      <Handle
        type="target"
        :position="Position.Left"
        :id="data.targetType[0]"
        style="top: 25%"
      />
      <Handle
        type="target"
        :position="Position.Left"
        :id="data.targetType[1]"
        style="top: 75%"
      />
    </template>

    <template v-if="data.sourceType.length === 1">
      <Handle
        type="source"
        :position="Position.Right"
        :id="data.sourceType[0]"
        @click="onToggle(data.sourceType[0])"
      />
      <div
        style="
          top: 25%;
          position: absolute;
          width: 20px;
          height: 20px;
          right: 0;
          background-color: black;
          cursor: pointer;
        "
        @click="onToggle(data.sourceType[0])"
      ></div>
    </template>
    <template v-if="data.sourceType.length === 2">
      <Handle
        type="source"
        :position="Position.Right"
        :id="data.sourceType[0]"
        style="top: 25%"
      />
      <Handle
        type="source"
        :position="Position.Right"
        :id="data.sourceType[1]"
        style="top: 75%"
        @click="onToggle(data.sourceType[1])"
      />
    </template>

    <table class="content">
      <tbody>
        <tr>
          <td class="col1">
            文件名:&nbsp;&nbsp;{{ data.label }}|{{ data.fileName }}
          </td>
          <td class="col2">
            <icon-more />
          </td>
        </tr>
        <tr>
          <td class="col1">编号:&nbsp;&nbsp;{{ data.fileName }}</td>
        </tr>
        <tr>
          <td class="col1">版本号:&nbsp;&nbsp;{{ data.version }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import {
  Handle,
  Position,
  useNodesData,
  useEdgesData,
  useVueFlow,
} from '@vue-flow/core'
import IconMore from './node-simple-more.vue'
let props = defineProps({
  data: { type: Object },
  targetPosition: { type: String },
  sourcePosition: { type: String },
  id: { type: String },
})
let nodes = useNodesData()
let edges = useEdgesData()
let { getNodes, getEdges } = useVueFlow()
console.log(getNodes)

/**
 * 显隐
 */
function onToggle(handleId) {
  getNodes.value.forEach(node => {
    let hasEdge = getEdges.value.some(({ source, target, sourceHandle }) => {
      return (
        source === props.id && target === node.id && sourceHandle === handleId
      )
    })
    if (hasEdge) {
      node.hidden = !node.hidden
    }
  })
  console.log(props.id, handleId)
}

watch(() => {})
</script>
<style lang="less" scoped>
.node-simple {
  background: #fcfcfc;
  border: 1px solid #ececec;
  border-radius: 2px;
  box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.05);
  padding: 8px 16px;
  &.active {
    background: #eff4ff;
    border: 1px solid #dbe3f9;
  }
  .content {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
